<template>
    <div class="userMain">
        <div class="seachDiv">
            <el-form :model="searchForm" inline ref="searchdataForm">
                <el-form-item label="时间">
                    <el-date-picker v-model="dateTime" type="daterange" @change="changeDate" range-separator="-"
                        start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="档期类型" prop="schedule_type">
                    <el-select v-model="searchForm.schedule_type">
                        <el-option label="主持人" value="0"></el-option>
                        <el-option label="督导" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="结账状态" prop="checkout_status">
                    <el-select v-model="searchForm.checkout_status">
                        <el-option label="已结账" value="0"></el-option>
                        <el-option label="未结账" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="人员" prop="fixed_gear_name">
                    <el-input type="text" v-model="searchForm.fixed_gear_name"></el-input>
                </el-form-item>
                <el-button plain class="rest" type="primary" @click="restForm">重置</el-button>
                <el-button class="search" type="primary" @click="queryForm">查询</el-button>
            </el-form>
        </div>
        <div class="tabelDiv">
            <div>
                <el-button class="add" type="primary" @click="addUser">新增</el-button>
                <el-button class="add" type="danger" @click="deletTable">批量删除</el-button>
            </div>
            <div style="width: 100%;flex: 1;overflow-y: auto;">
                <el-table :data="tableData" :height="tableHeight" style="width: 100%;"
                    @selection-change="tableSelectChange">
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <el-table-column label="序号" width="50" align="center" type="index">
                    </el-table-column>
                    <el-table-column prop="schedule_date" label="日期" align="center">
                    </el-table-column>
                    <el-table-column prop="hotel_name" label="酒店" align="center">
                    </el-table-column>
                    <el-table-column prop="ceremony_hall_name" label="仪式厅" align="center">
                    </el-table-column>
                    <el-table-column prop="schedule_type" label="档期类型" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.schedule_type == '0' ? '主持人' : '督导' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="fixed_gear_name" label="人员" align="center">
                    </el-table-column>
                    <el-table-column prop="service_price" label="合作价" align="center">
                    </el-table-column>
                    <el-table-column prop="studio_settlement" label="结算价" align="center">
                    </el-table-column>
                    <el-table-column prop="checkout_status" label="结账状态" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.checkout_status == 0 ? '已结账' : '未结账' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" fixed="right" align="center">
                        <template slot-scope="scope">
                            <el-button type="text" @click="editUser(scope.row.id, 'isdetail')">查看</el-button>
                            <el-button type="text" @click="editUser(scope.row.id, 'isedit')">编辑</el-button>
                            <el-button type="text" v-if="scope.row.checkout_status == '1'"
                                @click="checkDiv(scope.row)">结账</el-button>
                            <el-button type="text" style="color: #F56C6C;" @click="delUser(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-pagination class="page" @current-change="handleCurrentChange" :current-page.sync="currentPage"
                :page-size="10" layout="total, prev, pager, next" :total="pageTotal">
            </el-pagination>
        </div>
        <addCanlender ref="userDetail"></addCanlender>
        <canlenderCheckout ref="checkForm"></canlenderCheckout>
        <!-- <userAdd ref="userDetail"></userAdd> -->
    </div>
</template>
<script>
import addCanlender from './addCanlender.vue';
import canlenderCheckout from './canlenderCheckout.vue';
// import userAdd from './addUser.vue'
export default {
    components: {
        addCanlender,
        canlenderCheckout
        // userAdd
    },
    data() {
        return {
            dateTime: null,
            tableHeight: '100%',
            searchForm: {
                schedule_type: '',
                checkout_status: '',
                fixed_gear_name: '',
                start_date: '',
                end_date: '',
            },
            tableData: [],
            mapArr: [],
            pageTotal: 100,
            currentPage: 1,
            checkForm: {}
        }
    },
    methods: {
        tableSelectChange(val) {
            this.mapArr = val.map(item => item.id)
        },
        deletTable() {
            
            
            if (this.mapArr.length==0) {
                this.$message.warning('请选择要删除的项')
            } else {
                console.log(this.mapArr,'第一条');
                const arr = this.mapArr
                this.$confirm('此操作将删除选中的项, 是否继续删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    confirmButtonClass: 'btnConfirm',
                    cancelButtonClass: 'btnCancel',
                    type: 'warning'
                }).then(() => {
                    console.log(arr);
                    this.$api.batchDeleteCanItem({ids:arr}).then(res => {
                        this.$message.success('删除成功')
                        this.queryForm()
                    }).catch(error => {
                        this.$message.error(error.message)
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    })
                })
                this.mapArr = []
            }
        },
        checkDiv(item) {
            console.log(item);

            this.checkForm.id = item.id
            this.checkForm.wedding_is_checkout = item.wedding_is_checkout
            this.checkForm.studio_is_checkout = item.studio_is_checkout
            this.checkForm.update_user = sessionStorage.getItem('userId')
            this.$refs.checkForm.openDialog(this.checkForm)
        },
        formatterDate(val) {
            const date = new Date(val);
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份0开始，所以+1，然后格式化为两位
            const day = String(date.getDate()).padStart(2, '0');
            return `${year}-${month}-${day}`;
        },
        changeDate(val) {
            this.searchForm.start_date = this.formatterDate(val[0])
            this.searchForm.end_date = this.formatterDate(val[1])
        },
        queryForm() {
            let serch = { ...this.searchForm, size: 10, page: this.currentPage }
            this.$api.queryCanList(serch).then(res => {
                this.tableData = res.data
                this.pageTotal = res.total
            }).catch(error => {
                this.$message.error(error.message)
            })
        },
        restForm() {
            this.$refs.searchdataForm.resetFields()
            this.searchForm.start_date = ''
            this.searchForm.end_date = ''
            this.dateTime = []
            this.currentPage = 1
            this.queryForm()
        },
        handleCurrentChange(val) {
            this.currentPage = val
            this.queryForm()
        },
        addUser() {
            this.$refs.userDetail.adduser()
        },
        editUser(id, item) {
            this.$refs.userDetail.getUserDetail(id, item)
        },
        delUser(id) {
            this.$confirm('此操作将删除该信息, 是否继续删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                confirmButtonClass: 'btnConfirm',
                cancelButtonClass: 'btnCancel',
                type: 'warning'
            }).then(() => {
                this.$api.deleteCanItem(id).then(res => {
                    this.$message.success('删除成功')
                    this.queryForm()
                }).catch(error => {
                    this.$message.error(error.message)
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消操作'
                })
            })

        }
    },
    mounted() {
        this.queryForm()
    }
}
</script>
<style lang="less" scoped>
.userMain {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .seachDiv {
        width: calc(100% - 40px);
        height: 100px;
        // height: 110px;
        background: #fff;
        border-radius: 20px;
        padding: 20px;
        flex-shrink: 0;

    }

    .tabelDiv {
        width: calc(100% - 40px);
        background-color: #fff;
        border-radius: 20px;
        margin-top: 20px;
        padding: 20px 20px 0px 20px;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        flex: 1;
        overflow: hidden;

        .add {
            margin-bottom: 15px;
        }

        .page {
            margin-top: 5px;
        }
    }

}
</style>
<style>
.el-table__header th {
    background: #f5f7fa !important;
}
</style>
